<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="common/bootstrap.min.js"></script>
  <link href="common/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <title>发送页面</title>
  <style>
    h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
      margin: 0;
      padding: 0;
    }
    li{list-style: none;}
    html,body{ background:#f1f1f1; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;overflow-x: hidden;height: 100%;}
    nav{width:100%;height:80px;background:url("common/images/nav2.png")no-repeat center #4fbbf4;background-size:80%;}
    .select-input{width:100%;height:35px;border:none;font-size: 18px;background: url("common/images/head.png")no-repeat right center;background-size:contain;}
    .margin-top{margin-top: 15px;}
    .header{width: 100%;height:80px;margin-top: 50px;padding: 0 15px;}
    .head-ul{display: flex; -webkit-justify-content:space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
    .p-title{font-size: 20px;font-weight: bold;}
    .head-ul>li{display: inline-block;}
    .head-ul>li:nth-child(odd){width:16%;text-align: center;}
    .head-ul>li:nth-child(even){width:23%;height: 3px;background: #ccc;position: relative;top: -7px;}
    .num{width:50px;height:50px;line-height:50px;background: #ddd;color: #fff;border-radius: 50%;margin: 0 auto;font-size: 25px;}
    .container{width:95%;margin-top:10px;padding:30px 10px;overflow: hidden;background: #fff;}
    .name-ul{margin-top: 20px;display: none}
    .name-ul>li{width:100%;height:45px;display:flex;-webkit-align-items:center;align-items: center;margin-top: 15px;position: relative}
    .name-ul>li>input{position: absolute;left: -99999em;}
    .name-ul>li>input:checked+label:after{content: "✓";color:#4fbbf4;font-weight:800;font-size: 18px;}
    .name-ul>li>label{padding-left:50px;width: 80%;height: 40px;line-height: 40px;}
    .name-ul>li>label:after{content: "";width: 20px;height: 20px;position: absolute;right:10px;text-align: center;}
    i{height: 20px;width: 20px;background: url("common/images/head_sml.png")no-repeat center;background-size:contain; position: relative;left: 10px;bottom: 2px;}
    .cont-pr{width:100%;position: relative;margin: 15px 0 0 0;padding: 5px;border: 1px solid #ccc;}
    .send-sub{width:90px;height:35px;color:#fff;line-height: 35px;position: absolute;bottom:25px;left: 0;right: 0;margin: auto;border-radius: 8px;border: none;outline: none;}
    @media ( max-width: 375px) {
      .head-ul>li:nth-child(odd){width: 18%;}
      .head-ul>li:nth-child(even){width: 20%;top:-7px;}
      .send-text{font-size: 12px}
    }
    @media ( max-width: 320px) {
      .head-ul>li:nth-child(odd){width: 18%;}
      .head-ul>li:nth-child(even){width: 20%;top:-7px;}
      .send-text{font-size: 12px}
    }
  </style>
</head>
<body>
<nav></nav>
<div class="container">
  <p class="p-title">收件方姓名</p>
  <div class="cont-pr row margin-top">
    <input type="text" id="select_input" class="select-input" readonly="readonly" placeholder="请选择收件人">
  </div>
  <ul id="name_ul" class="name-ul">
    <li>
      <i></i>
      <input id="send-name1" class="send-name" type="radio" name="send-name" value="maozhuxi">
      <label for="send-name1">maozhuxi</label>
    </li>
    <li>
      <i></i>
      <input id="send-name2" class="send-name" type="radio" name="send-name" value="jiangshouzhang">
      <label for="send-name2">dengtongzhi</label>
    </li>
    <li>
      <i></i>
      <input id="send-name3" class="send-name" type="radio" name="send-name" value="hushuji">
      <label for="send-name3">jiangshouzhang</label>
    </li>
    <li>
      <i></i>
      <input id="send-name4" class="send-name" type="radio" name="send-name" value="xidada">
      <label for="send-name4">xidada</label>
    </li>
  </ul>
  <script>
    $(document).ready(function () {
      $('#select_input').click(function () {
        $('#name_ul').show(200);
      });
      var img_Url="common/images/nav3.png";
      $('#name_ul li').each(function () {
        $(this).click(function () {
          $(this).css('border','1px solid #ccc').siblings().hide();
          $('#send_sub').attr("disabled",false).css('background','#aaa');
          $('nav').css({'background':'url('+img_Url+')','background-repeat':'no-repeat','background-size':'80%','background-color':'#4fbbf4','background-position':'center'});
        })
      });
      $('#send_sub').click(function () {
        window.location.href="finish.html"
      });
    })
  </script>
</div>
<input id="send_sub" class="send-sub" type="submit" value="发送" disabled >
<!--
<div class="container">

    <div id="draggable">
      <img id="sign" src="" style="height: 120px;width: 200px;border:1px dashed;"/>
    </div>

    <div class="demo-description">
      <img src="./contract.png"/>
    </div>
</div>

  <div class="margin-div">
    <button class="btn-name btn-use" id="btnSign">签署</button>
  </div>


  <div class="modal fade" id="SmsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          &lt;!&ndash;<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>&ndash;&gt;
          <h4 class="modal-title" align="center">手机短信验证</h4>
        </div>
        <input type="hidden" id="phone" name="phone" value=""/>
        <h5 style="margin-left: 15px;">已发送验证码至<span id="showPhone"></span>，请输入验证码完成签署。</h5>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="smsCode" class="col-xs-3 control-label" style="margin: 0;">短信验证码</label>
              <div class="col-xs-5">
                <input type="text" class="form-control" id="smsCode" placeholder="请输入手机收到的验证码" value="123456">
              </div>
              <button type="button" class="btn bottom-bg2" id="reSendSmsBtn" style="margin-right: 20px;">获取验证码</button>
            </div>
            <div class="form-group">
              <div class="col-xs-offset-2 col-xs-10" style="padding-right: 10px;">
                <button type="reset" class="btn bottom-bg6" id="reset">取消</button>
                <button type="button" class="btn bottom-bg6" id="signSubmitBtn">确定</button>
              </div>
            </div>
          </form>
        </div>
      </div>&lt;!&ndash; /.modal-content &ndash;&gt;
    </div>&lt;!&ndash; /.modal-dialog &ndash;&gt;
  </div>&lt;!&ndash; /.modal &ndash;&gt;
-->

<script type="text/javascript">
  var destLeft = 0;
  var destTop = 0;
  $(function () {
    $('#sign').attr('src', 'data:image/png;base64,' + sessionStorage.getItem('sign'));

    $("#draggable").draggable({
      start: function (event, ui) {
        console.log('start moving~~~');
      },
      stop: function (event, ui) {
        destTop = parseFloat(ui.offset.top);
        destLeft = parseFloat(ui.offset.left);
        console.log('stop moving~~~:' + destLeft + ';' + destTop);
      }
    });
  });

  $("#btnSign").click(function () {
    $('#SmsModal').modal();
  });

  $("#reset").click(function () {
    $('#SmsModal').modal('hide');
  });

  $("#signSubmitBtn").click(function () {
    $('#SmsModal').modal('hide');
    $("#draggable").unbind();
  });
</script>
</body>
</html>